<template>
  <div class="hello">
    <Tree :noodData="data" :render="renderEle" />
  </div>
</template>

<script>
import Tree from '@/compoents/Tree/Tree'
export default {
  name: 'TestTree',
  data () {
    return {
      data: [{
        name: '1',
        children: [
          {
            name: '1-1',
            children: [
              {
                name: '1-1-1',
                children: []
              },
              {
                name: '1-1-2',
                children: []
              }
            ]
          },
          {
            name: '1-2',
            children: [
              {
                name: '1-2-1',
                children: []
              }
            ]
          }
        ]
      },
      {
        name: '2',
        children: [
          {
            name: '2-1',
            children: [
              {
                name: '2-1-1'
              }
            ]
          }
        ]
      }]
    }
  },
  components: {
    Tree
  },
  methods: {
    renderEle (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-plus-empty'
            }),
            on: {
              click: () => { this.append(data) }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-minus-empty'
            }),
            on: {
              click: () => { this.remove(root, node, data) }
            }
          })
        ])
      ])
    },
    append (data) {
      const children = data.children || []
      children.push({
        title: 'appended node',
        expand: true
      })
      this.$set(data, 'children', children)
    },
    remove (root, node, data) {
      const parentKey = root.find(el => el === node).parent
      const parent = root.find(el => el.nodeKey === parentKey).node
      const index = parent.children.indexOf(data)
      parent.children.splice(index, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
